<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>QueryString 查看器</title>
    <style>
        label {
            display: block;
            width: auto;
        }

        #url {
            font-size: 14px;
            padding: 10px 4px;
            border: 1px solid #CCC;
            display: block;
            width: 100%;
            box-sizing: border-box;
            word-break: break-all;
        }

        #output {
            white-space: pre;
        }

        table {
            text-align: left;
            border: 1px solid #666;
            border-collapse: collapse;
            table-layout: fixed;
        }

        th, td {
            border: 1px solid #CCC;
            padding: 10px 4px;
            white-space: pre-line;
            word-break: break-all;
        }

        .key {
            width: 8em;
            text-align: left;
            background: #EEE;
        }
    </style>
</head>
<body>
    <h1>QueryString 查看器</h1>
    <label>
        <textarea type="text"
            placeholder="请输入网站"
            rows="4"
            id="url"></textarea>
    </label>
    <p id="output"></p>
    <script type="module">
        import { getRequestParams } from '../js/bom.js';
        import { $ } from '../js/dom.js';

        init();

        function init() {
            $('#url').addEventListener('input', onInput);
            update();
        }

        function onInput() {
            update();
        }

        function update() {
            const url = $('#url').value.trim();
            if (!url) {
                $('#output').textContent = '暂无有效网址';
                return;
            };

            const params = getRequestParams(url);
            if (Object.keys(params).length === 0) {
                $('#output').textContent = '暂无有效网址';
                return;
            }

            $('#output').innerHTML = transform(params);
        }

        function transform(obj) {
            let result = `<table>
                <thead>
                <tr>
                    <th class="key">Key</th>
                    <th>Value</th>
                </tr></thead><tbody>`;
            for (let key in obj) {
                result += `<tr><td class="key">${key}</td><td>${decodeURIComponent(obj[key])}</td></tr>`;
            }

            result += '</tbody></table>';

            return result;
        }
    </script>
</body>
</html>